<template>
	<view>
		<view v-for="order in orderList" :key="order.orderId" class="order-card" v-if="orderList.length > 0">
			<!-- 订单编号和已支付状态 -->
			<view class="order-header">
				<view class="order-number">订单编号：{{ order.orderNo }}</view>
				<view class="order-status">已支付</view>
			</view>

			<!-- 商品信息 -->
			<view class="product-info">
				<image :src="order.goodsInfo[0].goodsDescription" class="product-image" mode="aspectFit" />
				<view class="product-detail">
					<view class="product-name">{{ order.goodsInfo[0].goodsName }}</view>
					<view class="product-price">¥{{ order.payAmount }}</view>
				</view>
			</view>

			<!-- 支付时间 -->
			<view class="payment-time">支付时间: {{ order.createTime }}</view>
		</view>
		<view v-if="orderList.length === 0" class="empty-container">
			<view class="no-order">没有查询到您的订单信息</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				orderList: []
			}
		},
		onShow() {
			this.fetchOrderList()
		},
		methods: {
			async fetchOrderList() {
				const that = this

				try {
					that.$http.GET('/app/order/order/getPaidOrders', {}, function(res) {
						that.orderList = res.data
						console.log("获取订单列表成功,订单为：", that.orderList.length)
					}, function(err) {
						console.error('获取订单列表失败:', err)
					})
				} catch (error) {
					console.error('获取订单列表失败:', error)
				}
			}
		}
	}
</script>

<style>
	.order-card {
		padding: 15px;
		margin: 0 10px 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.order-number {
		font-size: 14px;
		color: #383838;
	}

	.order-status {
		font-size: 12px;
		color: #e64340;
	}

	.product-info {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}

	.product-image {
		width: 100px;
		height: 100px;
		margin-right: 12px;
		border-radius: 4px;
	}

	.product-detail {
		flex: 1;
	}

	.product-name {
		font-size: 16px;
		color: #383838;
		margin-bottom: 6px;
	}

	.product-price {
		font-size: 14px;
		color: #e64340;
	}

	.payment-time {
		font-size: 12px;
		color: #383838;
	}

	.empty-container {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 70vh;
	}

	.no-order {
		font-size: 16px;
		color: #999;
		text-align: center;
	}
</style>